<template>
    <div class="person-container">
        <main-header>
            <div slot="login">
            </div>
        </main-header>
        <sign-header>
            <div slot="append">
                <div class="tips fr">
                    好的简历让你脱颖而出
                </div>
            </div>
        </sign-header>
        <div class="sign-main">
            <div class="sign-title">
                创建简历
                <span class="color">*为必填项</span>
            </div>
            <div class="sign-form">
                <div class="document">
                    <header><img src="../../../../assets/images/sign-in/logo_Inform.png" alt="">基本信息</header>
                    <main>
                        <el-form label-width="140px">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="姓名：">
                                        <el-input placeholder="请输入姓名"></el-input>
                                    </el-form-item>
                                    <el-form-item label="出生年份：">
                                        <el-select placeholder="请选择" :value="1">
                                            <el-option :label="1" :value="1"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="最高学历：">
                                        <el-select placeholder="请选择" :value="1">
                                            <el-option :label="1" :value="1"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="手机号：">
                                        <el-input placeholder="请输入手机号"></el-input>
                                    </el-form-item>
                                    <el-form-item label="工作经验：">
                                        <el-select placeholder="请选择" :value="1">
                                            <el-option :label="1" :value="1"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="学校名称：">
                                        <el-input placeholder="请输入学校名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="就读时间：">
                                        <el-date-picker
                                                type="date"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="性别：">
                                        <img
                                                :src="maleChoose==='male'?male.active:male.sleep"
                                                @click="maleChoose='male'"
                                                class="male-select"
                                        >
                                        男
                                        <img
                                                :src="maleChoose==='female'?female.active:female.sleep"
                                                @click="maleChoose='female'"
                                                class="male-select"
                                        >
                                        女
                                    </el-form-item>
                                    <el-form-item label="现居住地：">
                                        <el-cascader
                                                :options="options"
                                                v-model="selectedOptions"
                                                @change="handleChange">
                                        </el-cascader>
                                    </el-form-item>

                                    <el-form-item label="是否結婚：">
                                        <el-select placeholder="请选择" :value="0">
                                            <el-option label="未婚" :value="0"></el-option>
                                            <el-option label="已婚" :value="1"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="邮箱：">
                                        <el-input placeholder="请输入您的邮箱"></el-input>
                                    </el-form-item>
                                    <el-form-item label="标签：">
                                        <el-select placeholder="请选择" :value="0">
                                            <el-option label="形象好" :value="0"></el-option>
                                            <el-option label="气质佳" :value="1"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="专业：">
                                        <el-input placeholder="所读专业"></el-input>
                                    </el-form-item>
                                    <el-form-item label="毕业时间：">
                                        <el-date-picker
                                                type="date"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>

                        <el-form  label-position="top" style="margin: 0px 53px 0px 57px;">
                            <el-form-item label="个人简介：">
                                <el-input
                                        type="textarea"
                                        placeholder="请输入内容"
                                        maxlength="200"
                                        show-word-limit
                                        rows="4"
                                >
                                </el-input>
                            </el-form-item>
                            <el-form-item align="center" class="form-footer">
                                <div class="release-btn" @click="goPage('/PersonStep')">下一步</div>
                            </el-form-item>
                        </el-form>
                    </main>
                </div>
            </div>
            <div class="sign-footer">
                CopyRight @2019 江西易夫子人力资源有限公司
            </div>
        </div>
    </div>
</template>

<script>
    import SignHeader from '@/pages/sign-in/components/SignHeader.vue'
    import MainHeader from '@/pages/components/MainHeader.vue'

    export default {
        name: "PersonInfor",
        components: {
            SignHeader,
            MainHeader
        },
        data() {
            return {
                male: {
                    sleep:require('images/sign-in/man_n.png'),
                    active: require('images/sign-in/man_s.png'),
                },
                maleChoose: 'male',
                female: {
                    sleep:require('images/sign-in/woman_n.png'),
                    active: require('images/sign-in/woman_s.png'),
                },
                options: [
                    {
                        value: 'zhinan',
                        label: '指南',
                        children: [{
                            value: 'shejiyuanze',
                            label: '设计原则',
                            children: [{
                                value: 'yizhi',
                                label: '一致'
                            }, {
                                value: 'fankui',
                                label: '反馈'
                            }, {
                                value: 'xiaolv',
                                label: '效率'
                            }, {
                                value: 'kekong',
                                label: '可控'
                            }]
                        }, {
                            value: 'daohang',
                            label: '导航',
                            children: [{
                                value: 'cexiangdaohang',
                                label: '侧向导航'
                            }, {
                                value: 'dingbudaohang',
                                label: '顶部导航'
                            }]
                        }]
                    }, {
                        value: 'zujian',
                        label: '组件',
                        children: [{
                            value: 'basic',
                            label: 'Basic',
                            children: [{
                                value: 'layout',
                                label: 'Layout 布局'
                            }, {
                                value: 'color',
                                label: 'Color 色彩'
                            }, {
                                value: 'typography',
                                label: 'Typography 字体'
                            }, {
                                value: 'icon',
                                label: 'Icon 图标'
                            }, {
                                value: 'button',
                                label: 'Button 按钮'
                            }]
                        }, {
                            value: 'form',
                            label: 'Form',
                            children: [{
                                value: 'radio',
                                label: 'Radio 单选框'
                            }, {
                                value: 'checkbox',
                                label: 'Checkbox 多选框'
                            }, {
                                value: 'input',
                                label: 'Input 输入框'
                            }, {
                                value: 'input-number',
                                label: 'InputNumber 计数器'
                            }, {
                                value: 'select',
                                label: 'Select 选择器'
                            }, {
                                value: 'cascader',
                                label: 'Cascader 级联选择器'
                            }, {
                                value: 'switch',
                                label: 'Switch 开关'
                            }, {
                                value: 'slider',
                                label: 'Slider 滑块'
                            }, {
                                value: 'time-picker',
                                label: 'TimePicker 时间选择器'
                            }, {
                                value: 'date-picker',
                                label: 'DatePicker 日期选择器'
                            }, {
                                value: 'datetime-picker',
                                label: 'DateTimePicker 日期时间选择器'
                            }, {
                                value: 'upload',
                                label: 'Upload 上传'
                            }, {
                                value: 'rate',
                                label: 'Rate 评分'
                            }, {
                                value: 'form',
                                label: 'Form 表单'
                            }]
                        }, {
                            value: 'data',
                            label: 'Data',
                            children: [{
                                value: 'table',
                                label: 'Table 表格'
                            }, {
                                value: 'tag',
                                label: 'Tag 标签'
                            }, {
                                value: 'progress',
                                label: 'Progress 进度条'
                            }, {
                                value: 'tree',
                                label: 'Tree 树形控件'
                            }, {
                                value: 'pagination',
                                label: 'Pagination 分页'
                            }, {
                                value: 'badge',
                                label: 'Badge 标记'
                            }]
                        }, {
                            value: 'notice',
                            label: 'Notice',
                            children: [{
                                value: 'alert',
                                label: 'Alert 警告'
                            }, {
                                value: 'loading',
                                label: 'Loading 加载'
                            }, {
                                value: 'message',
                                label: 'Message 消息提示'
                            }, {
                                value: 'message-box',
                                label: 'MessageBox 弹框'
                            }, {
                                value: 'notification',
                                label: 'Notification 通知'
                            }]
                        }, {
                            value: 'navigation',
                            label: 'Navigation',
                            children: [{
                                value: 'menu',
                                label: 'NavMenu 导航菜单'
                            }, {
                                value: 'tabs',
                                label: 'Tabs 标签页'
                            }, {
                                value: 'breadcrumb',
                                label: 'Breadcrumb 面包屑'
                            }, {
                                value: 'dropdown',
                                label: 'Dropdown 下拉菜单'
                            }, {
                                value: 'steps',
                                label: 'Steps 步骤条'
                            }]
                        }, {
                            value: 'others',
                            label: 'Others',
                            children: [{
                                value: 'dialog',
                                label: 'Dialog 对话框'
                            }, {
                                value: 'tooltip',
                                label: 'Tooltip 文字提示'
                            }, {
                                value: 'popover',
                                label: 'Popover 弹出框'
                            }, {
                                value: 'card',
                                label: 'Card 卡片'
                            }, {
                                value: 'carousel',
                                label: 'Carousel 走马灯'
                            }, {
                                value: 'collapse',
                                label: 'Collapse 折叠面板'
                            }]
                        }]
                    }, {
                        value: 'ziyuan',
                        label: '资源',
                        children: [{
                            value: 'axure',
                            label: 'Axure Components'
                        }, {
                            value: 'sketch',
                            label: 'Sketch Templates'
                        }, {
                            value: 'jiaohu',
                            label: '组件交互文档'
                        }
                        ]
                    }
                ],
                selectedOptions: [],
                selectedOptions2: []
            }
        },
        methods: {
            goPage(path) {
                this.$router.push({path: path})
            },
            handleChange(value) {
                console.log(value);
            }
        }
    }
</script>

<style scoped lang="less">
    .person-container /deep/ .el-input__inner {
        width: 246px;
        height: 34px;
    }
    .person-container {
        height: 100%;
        background:#F7F8FA;
        .tips {
            line-height: 110px;
            font-size: 14px;
        }
        .sign-main {
            width: 1100px;
            margin: 0 auto;
            background:#F7F8FA;
            .sign-title {
                height:72px;
                line-height: 72px;
                font-size:14px;
                font-weight:400;
                color:rgba(51,51,51,1);
                .color {
                    color: @main-color
                }
            }
            .sign-form {
                /*height:770px;*/
                background:rgba(255,255,255,1);
                padding: 0 48px 20px 48px;
                .document {
                    header {
                        height: 61px;
                        padding: 29px 0 0 26px;
                        box-sizing: border-box;
                        border-bottom: 1px solid rgba(238,238,238,1);font-size:16px;
                        font-family:MicrosoftYaHei;
                        font-weight:400;
                        color:rgba(51,51,51,1);
                        position: relative;
                        img {
                            position: absolute;
                            left: 0;
                            bottom: 11px;
                        }
                    }
                    main {
                        width: 900px;
                        margin-top: 52px;
                    }
                    .male-select {
                        cursor: pointer;
                        &:nth-of-type(2) {
                            margin-left: 20px;
                        }
                    }
                }
                .attestation {
                    header {
                        height: 61px;
                        padding: 29px 0 0 26px;
                        box-sizing: border-box;
                        border-bottom: 1px solid rgba(238,238,238,1);font-size:16px;
                        font-family:MicrosoftYaHei;
                        font-weight:400;
                        color:rgba(51,51,51,1);
                        position: relative;
                        img {
                            position: absolute;
                            left: 0;
                            bottom: 11px;
                        }
                    }
                    main {
                        width: 900px;
                        margin-top: 52px;
                    }
                }
                .remark {
                    font-weight:400;
                    color:rgba(153,153,153,1);
                    height: 20px;
                    line-height: 20px;
                    font-size: 12px
                }
                .form-footer {
                    margin-top: 50px;
                    .release-btn,.complete-btn  {
                        width:125px;
                        height:48px;
                        line-height: 48px;
                        text-align: center;
                        background:rgba(230,31,31,1);
                        border-radius:2px;font-size:16px;
                        font-family:MicrosoftYaHeiSemibold;
                        cursor: pointer;
                        color:rgba(255,255,255,1);
                        display: inline-block;
                    }
                    .release-btn {
                        margin-right: 41px;
                    }
                    .complete-btn {
                        background:rgba(204,204,204,1);
                    }
                }
            }
            .sign-footer {
                width: 1100px;
                height:72px;
                line-height: 72px;
                text-align: center;
                font-size:14px;
                font-weight:400;
                color:#CCCCCC;
            }
        }
    }
</style>